<template>
  <Layout :class="'bg-white p-2'">
    <!-- 第一层  添加按钮以及全局搜索框 -->
    <Row :class="'m-0'">
      <Col span="9">
        <div class="search">
          <Input
            search
            placeholder="按照名字模糊检索"
            v-model="searchbaomingList.indistinctName"
            :class="'m-2'"
          />
        </div>
      </Col>
      <Col span="2">
        <Button
          class="m-2 w-75"
          type="primary"
          shape="circle"
          @click="searchBaomingList"
          icon="ios-search"
          >查询</Button
        >
      </Col>
      <Col span="3" push="2">
        <Button class="m-2 w-50" disabled type="success" @click="excelOut()"
          >导出</Button
        >
      </Col>
    </Row>
    <!-- 第二行 -->
    <Row :class="'m-0'">
      <Col span="4">
        <Input
          :class="'w-75 m-2'"
          v-model="searchbaomingList.student.name"
          placeholder="姓名"
        />
      </Col>
      <Col span="4">
        <Input
          :class="'w-75 m-2'"
          v-model="searchbaomingList.student.tel"
          placeholder="电话"
        />
      </Col>
      <Col span="3">
        <Date-picker
          :class="'w-100 m-2'"
          type="datetime"
          v-model="searchbaomingList.baomingStartTime"
          placeholder="报名开始时间"
          transfer
        >
        </Date-picker>
      </Col>
      <div class="to">~</div>
      <Col span="3">
        <Date-picker
          :class="'w-100 m-2'"
          type="datetime"
          v-model="searchbaomingList.baomingEndTime"
          placeholder="报名结束时间"
          transfer
        >
        </Date-picker>
      </Col>
    </Row>
    <!-- 第三行 -->
    <Row :class="'m-0'">
      <Col span="4">
        <i-col :class="'w-75 m-2'">
          <Select
            placeholder="请选择跟进人"
            v-model="searchbaomingList.baoming.autor"
            filterable
            clearable
            transfer
            :disabled="isSelectAutor"
          >
            <Option v-for="item in autorList" :value="item.value"
              >{{ item.label }}
            </Option>
          </Select>
        </i-col>
      </Col>
      <Col span="4">
        <i-col :class="'m-2 w-75 '">
          <Select
            placeholder="请选择服务项目"
            clearable
            v-model="searchbaomingList.projectService.name"
            @on-change="selectProjectService()"
          >
            <Option v-for="item in projectServiceList" :value="item.name"
              >{{ item.name }}
            </Option>
          </Select>
        </i-col>
      </Col>
      <Col span="4">
        <i-col :class="'m-2 w-75 '">
          <Select
            placeholder="请选择分期方案"
            clearable
            v-model="searchbaomingList.paymentOptions.name"
            @on-change="selectProjectService()"
          >
            <Option v-for="item in paymentOptionList" :value="item.name"
              >{{ item.name }}
            </Option>
          </Select>
        </i-col>
      </Col>
    </Row>

    <Layout :class="'bg-white'">
      <Table
        disabled-hover
        border
        :class="'m-1'"
        :columns="columnInfo"
        :data="resultBaomingList"
        :row-class-name="rowClassName"
      >
        <!-- 名字超链接 -->
        <template slot-scope="{ row, index }" slot="name">
          <Row>
            <Col>
              <a @click="showPersonDetail(row)">{{ row.name }}</a>
            </Col>
          </Row>
        </template>
        <!-- 下拉菜单 -->
        <template slot-scope="{ row, index }" slot="action">
          <Dropdown class="bottom" transfer disabled-hover trigger="click">
            <Button type="primary">· · ·</Button>
            <DropdownMenu slot="list">
              <DropdownItem>
                <Button type="primary" @click="show(row)"
                  >详细</Button
                ></DropdownItem
              >
              <DropdownItem>
                <Button type="primary" @click="updateBaomingAutor(row)"
                  >分配</Button
                >
              </DropdownItem>
              <DropdownItem>
                <Button
                  type="primary"
                  @click="again(row)"
                  :disabled="row.status == '已生效' || '已结清' || '还款中'"
                  >重新申请</Button
                ></DropdownItem
              >
            </DropdownMenu>
          </Dropdown>
        </template>
      </Table>
      <Page
        class="pages"
        :class="'m-2 text-right'"
        :page-size="searchbaomingList.size"
        @on-change="pageSearch"
        :total="searchbaomingList.total"
        :current="searchbaomingList.page"
        show-sizer
        @on-page-size-change="changeSize"
      />
    </Layout>
  </Layout>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    let self = this
    return {
      searchIndistinctName: '',
      visible: false,
      alllist: 'height: 90px;transition:all linear .1s;overflow:hidden',
      apart: 'height: 130px;transition:all linear .1s',
      isShow: true,
      searchbaomingList: {
        page: 1,
        size: 10,
        total: 0,
        totalPage: '',
        indistinctName: '',
        baomingStartTime: '',
        baomingEndTime: '',
        student: { name: '', tel: '' },
        baoming: { autor: '' },
        projectService: { name: '' },
        paymentOptions: { name: '' },
      },
      projectServiceList: [],
      paymentOptionList: [],
      columnInfo: [
        {
          title: '#',
          width: 80,
          fixed: 'left',
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              params.index +
                (self.searchbaomingList.page - 1) *
                  self.searchbaomingList.size +
                1
            )
          },
        },
        {
          title: '学生姓名',
          slot: 'name',
          width: 100,
          fixed: 'left',
        },
        {
          title: '联系电话',
          key: 'tel',
          width: 150,
          fixed: 'left',
        },
        {
          title: '报名时间',
          key: 'datetime',
          width: 150,
        },
        {
          title: '服务项目',
          key: 'projectServiceName',
          width: 200,
        },
        {
          title: '项目价格',
          key: 'projectServiceAmount',
          width: 200,
        },
        {
          title: '分期方案',
          key: 'paymentOptionsName',
          width: 200,
        },

        {
          title: '优惠',
          key: 'paymentDiscount',
          width: 150,
        },
        {
          title: '服务费',
          key: 'totalService',
          width: 200,
        },
        {
          title: '总计',
          key: 'paymentTotalAmount',
          width: 150,
        },
        {
          title: '跟进人',
          key: 'autor',
          width: 200,
        },
        {
          title: '申请状态',
          key: 'status',
          width: 200,
        },
        {
          title: '操作',
          slot: 'action',
          width: 100,
          fixed: 'right',
        },
      ],
      resultBaomingList: [],
      autorUserId: '',
      autorList: [],
      modal2: false,
      nowDate: '',
      currentTime: new Date(),
      isSelectAutor: true,
    }
  },
  methods: {
    showPersonDetail: function(row) {
      this.$router.push({
        name: 'student_detail',
        params: {
          row,
        },
      })
    },
    showAll: function() {
      this.isShow = !this.isShow
    },
    showPart: function() {
      this.isShow = !this.isShow
    },
    init: function() {
      this.$data.searchbaomingList.page = 1
      this.searchBaomingList()
      this.getTime()
      this.selectprojectService()
      this.selectpaymentOptions()
    },
    getTime() {
      const date = new Date()
      const year = date.getFullYear()
      const month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.nowDate = year + '-' + month + '-' + day
    },
    rowClassName(row, index, nowDate) {
      if (row.reservationBackviewTime == null) {
        return
      }
      let str = row.reservationBackviewTime
      str = str.substring(0, 10)
      if (this.nowDate == str) {
        return 'demo-table-row'
      } else if (this.nowDate != str) {
        return ''
      }
    },
    show: function(row) {
      this.$router.push({
        name: 'baoming_detail',
        params: {
          row,
        },
      })
    },
    again: function(row) {
      this.$router.push({
        name: 'baoming_again',
        params: {
          row,
        },
      })
    },
    searchBaomingList: function() {
      let aa = {
        page: 1,
        size: 10,
      }
      this.http
        .get({
          url: '/baoming/list',
          param: { baomingStr: this.searchbaomingList },
        })
        .then((data) => {
          console.log(data)
          this.$data.searchbaomingList.page = data.pageInfo.page
          this.$data.searchbaomingList.size = data.pageInfo.size
          this.$data.searchbaomingList.total = data.pageInfo.total
          this.$data.searchbaomingList.totalPage = data.pageInfo.totalPage
          this.$data.resultBaomingList = parseDataObj(data)
        })
    },
    pageSearch: function(changedPage) {
      this.$data.searchbaomingList.page = changedPage
      this.searchBaomingList()
    },
    changeSize: function(changeSize) {
      this.$data.searchbaomingList.size = changeSize
      this.searchBaomingList()
    },
    //请求服务项目列表
    selectprojectService: function() {
      this.http
        .get({
          url: '/projectService/list',
        })
        .then((data) => {
          this.$data.projectServiceList = data
        })
    },
    //请求服务付款方式列表
    selectpaymentOptions: function() {
      this.http
        .get({
          url: '/paymentOptions/list',
        })
        .then((data) => {
          this.$data.paymentOptionList = data
        })
    },
    //分配线索
    updateBaomingAutor: function(row) {
      this.modal2 = false

      this.$Modal.confirm({
        title: '分配线索',

        render: (h, params) => {
          return h(
            'Select',
            {
              props: {
                value: row.autor, // 获取选择的下拉框的值
                size: 'small',
              },
              on: {
                'on-change': (val) => {
                  this.autorUserId = val
                },
              },
            },
            this.autorList.map(function(item) {
              return h('Option', {
                props: {
                  value: item.value,
                  label: item.label,
                },
              })
            })
          )
        },

        onOk: () => {
          this.http
            .put({
              url: '/baoming/autor',
              param: {
                baomingId: row.baomingId,
                autorId: this.autorUserId,
              },
            })
            .then((data) => {
              this.searchBaomingList()
              this.message.info('分配成功')
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
  },
  created: function() {
    //从session中取出用户列表
    let userList = JSON.parse(localStorage.getItem('USER_LIST'))
    userList.forEach((user) => {
      let u = {
        value: user.userId,
        label: user.nickName,
      }
      this.autorList.push(u)
    })
    //在session中取出当前用户权限并校验绑定跟进人条件检索的选择框
    let currentUser = JSON.parse(sessionStorage.getItem('CURRENT_USER'))
    currentUser.permissions.forEach((twopermission) => {
      twopermission.permissions.forEach((per) => {
        if (per.name == '可分配') {
          this.isSelectAutor = false
        }
      })
    })
    this.init()
    this.getTime()
  },
}

/*
      	此函数主要解析返回的data，将复杂的级联对象封装为resultBaomingList所对应的字段的对象
      */
function parseDataObj(data) {
  //从session中取出用户的集合
  let userList = JSON.parse(localStorage.getItem('USER_LIST'))
  // let userList = JSON.parse(store.state.currentUser)
  //定义一个跟进人名字变量
  let autorName = ''
  //定义一个添加人名字变量
  let cuName = ''
  var BaomingArray = []

  data.list.forEach((list) => {
    let autorName = null
    userList.forEach((user) => {
      if (user.userId == list.baoming.autor) {
        autorName = user.nickName
      }
      if (user.userId == list.baoming.cu) {
        cuName = user.nickName
      }
    })
    let poko = {
      name: list.student.name,
      tel: list.student.tel,
      autor: autorName,
      datetime: list.baoming.dateTime,
      status: list.payment.status,
      projectServiceName: list.projectService.name,
      projectServiceAmount: list.projectService.amount,
      paymentOptionsName: list.paymentOptions.name,
      paymentDiscount: list.payment.discount,
      paymentTotalAmount: list.payment.totalAmount,
      totalService:
        Number(list.payment.totalAmount) - Number(list.projectService.amount),
      baomingId: list.baoming.id,
      studentId: list.student.id,
      autorId: list.baoming.autor,
    }
    BaomingArray.push(poko)
  })
  return BaomingArray
}
</script>

<style scoped>
.to {
  padding: 10px 10px 0px 30px;
}

.search {
  margin-right: 5px;
}
.hidden {
  position: relative;
  top: 2px;
  cursor: pointer;
  color: gray;
  font-size: 12px;
  padding: 0px 0px 0px 1050px;
}

.bottom {
  text-align: center;
  z-index: 0;
}
.ivu-select-dropdown button {
  display: block;
  margin: 5px 10px;
  width: 120px;
}
.ivu-select-dropdown .ivu-dropdown-item {
  padding: 0;
}
.ivu-table .demo-table-row2 td {
  background-color: white;
}
</style>
<style>
.ivu-select-dropdown {
  max-height: 325px;
}
.ivu-table .demo-table-row td {
  background-color: #f1939c;
  color: #ffffff;
}
</style>
